<template>
	<view class="box bg-f7">
		<view class="bg-box">
			<image :src='BASE_URL + "/uploads/20250801/28894440499bfea623d7984dde29348f.png"' mode="widthFix"></image>

		</view>
		<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title="设计师主页" bgColor="transparent"
			@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
		<view class="z-1">
			<view class="padding-30 flex-box avatar-box">
				<view class="avatar-img">
					<image :src="BASE_URL +  info.images" mode="aspectFill"></image>
				</view>
				<view class="margin-l-20 fw-b color-0 fs-28 name-box"  >{{info.name}}</view>
			</view>
			<view class="padding-l-r-30 content-box">
                <view class="bg-white border-radio-20 padding-l-r-20 introduce-box">
                    <view class="align-items-center margin-b-10">
                        <view class="image">
                            <image src="/static/image/elderlySuitable/history.png" mode="widthFix"></image>
                        </view>
                        <text>从业{{info.work_year}}年</text>
                    </view>
                    <view class="align-items-center">
                        <view class="image">
                            <image src="/static/image/elderlySuitable/product.png" mode="widthFix"></image>
                        </view>
                        <text class="only-1"> {{info.content}} </text>
                    </view>
                </view>
                <view class=" works-box">
                    <view class="fw-b color-0 fs-30">作品案例</view>
                    <view class="bg-white">
                        <view v-for="(item ,index) in worksList" :class="{ 'margin-t-20':index>0}" class=" works-item border-radio-20">
                            <image :src="BASE_URL +item" mode="widthFix"></image>
                        </view>
                    </view>
                </view>
            </view>
		</view>
        <view class="reservation-btn-box padding-l-r-30 z-1">
            <view class="btn-box color-white fs-28 bg-43 border-radio-14" @click="goReservation">
                我要预约
            </view>
        </view>
	</view>
</template>

<script>

import $baseUrl from "@/config/index.js"
const BASE_URL = $baseUrl.baseUrl
import  { decorationDetail }  from  "@/api/elderlySuitable"
	export default {
		data() {
			return { 
				info:{  },
                worksList:[  ],
                BASE_URL
			}
		},
		onShow() { 
			this.getDatails()
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			 getDatails(){
                 decorationDetail({decoration_id:this.id}).then(res=>{
                     if (res.code == 1){
                         this.info = res.data
						 this.worksList =res.data.images.split(',')
                     }else {
                         uni.showToast({
                             icon:'none',
                             title:res.msg
                         })
                     }
                 })
			 },
			goReservation(){
				uni.navigateTo({
					url:'/pageA/elderlySuitable/reservation?id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 180rpx;
	}
	.bg-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}
    .content-box {
        margin-top: -90rpx;
    }
	.avatar-box {
        align-items: flex-end;
		.avatar-img {
			width: 120rpx;
			height: 120rpx;
			overflow: hidden;
			border-radius: 60rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name-box {
            margin-bottom: 10rpx;
        }
	}
    .introduce-box {
        padding-top: 88rpx;
        padding-bottom: 56rpx;
        image {
            width: 22rpx;
            margin-right: 16rpx;
        }
        text {
            font-size: 24rpx;
            color: #4D4D4D;
        }
    }
    .works-box {
        .fs-30{
            padding: 42rpx 0 18rpx;
        }
    }
    .works-item {
		line-height: 0;
        image {
            width: 100%;
        }
    }
</style>